<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>纸片对话框</title>
		<style type="text/css">
			@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
.panel {
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  -webkit-transition: 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
}
.panel.is--open {
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
}

.panel__content {
  padding-bottom: 4em;
  background: #fff;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  color: #5a5a5a;
  text-align: center;
}
.panel__content h4 {
  padding: 1.5em 0;
  border-bottom: 2px solid #ededed;
  color: #865fdf;
  font-size: 1.15em;
  font-weight: 700;
  text-transform: uppercase;
}
.panel__content h2 {
  padding: .5em 1.5em;
  font-size: 3em;
  font-weight: 300;
}
.panel__content p {
  margin: auto;
  width: 55%;
  font-size: 1.15em;
  font-weight: 300;
  line-height: 1.4;
}

.panel__flaps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.flap {
  height: 100px;
  background: #865fdf;
}

.flap__btn {
  width: calc((100% - 212px) / 2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  background: #8f69e8;
  color: white;
  cursor: pointer;
  font-size: 2.25em;
  font-weight: 700;
  text-decoration: none;
  z-index: 1;
  -webkit-transition: .2s ease;
  transition: .2s ease;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.flap__btn:hover, .flap__btn:focus {
  background: #865fdf;
  outline: none;
  -webkit-transform: rotateX(-25deg) translate3d(0, 0, 0);
          transform: rotateX(-25deg) translate3d(0, 0, 0);
}

.outer {
  width: 106px;
}

.flap--left {
  border-bottom-left-radius: 25px;
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

.flap--right {
  border-bottom-right-radius: 25px;
  -webkit-transform-origin: top left;
          transform-origin: top left;
}

.is--open .outer {
  -webkit-animation: swing 1.5s .2s ease;
          animation: swing 1.5s .2s ease;
}
.is--open .flap__btn:first-of-type {
  -webkit-animation: swing 1.5s .3s ease;
          animation: swing 1.5s .3s ease;
}
.is--open .flap__btn:last-of-type {
  -webkit-animation: swing 1.5s .4s ease;
          animation: swing 1.5s .4s ease;
}

@-webkit-keyframes swing {
  10% {
    -webkit-transform: rotateX(25deg);
            transform: rotateX(25deg);
  }
  50% {
    -webkit-transform: rotateX(-15deg);
            transform: rotateX(-15deg);
  }
  75% {
    -webkit-transform: rotateX(5deg);
            transform: rotateX(5deg);
  }
  90% {
    -webkit-transform: rotateX(-2.5deg);
            transform: rotateX(-2.5deg);
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

@keyframes swing {
  10% {
    -webkit-transform: rotateX(25deg);
            transform: rotateX(25deg);
  }
  50% {
    -webkit-transform: rotateX(-15deg);
            transform: rotateX(-15deg);
  }
  75% {
    -webkit-transform: rotateX(5deg);
            transform: rotateX(5deg);
  }
  90% {
    -webkit-transform: rotateX(-2.5deg);
            transform: rotateX(-2.5deg);
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}
.replay {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: .5em;
  background: #865fdf;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.replay:hover, .replay:focus {
  background: #8f69e8;
  outline: none;
  box-shadow: 0 0 25px #865fdf;
}
.replay:active {
  -webkit-transform: translate(-50%, -50%) scale(0.9);
          transform: translate(-50%, -50%) scale(0.9);
}
.replay.is--active {
  opacity: 1;
  pointer-events: initial;
}

*, *:before, *:after {
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #2e2e2e;
  font-family: "Lato", Arial, sans-serif;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

		</style>
	</head>
	<body>
		<div class='panel' id='js-panel'>
  <div class='panel__content'>
    <h4>Just Checking...</h4>
    <h2>Delete your Account?</h2>
    <p>This action is final and you will be unable to recover any data</p>
  </div>
  <div class='panel__flaps'>
    <div class='flap outer flap--left'></div>
    <a class='flap flap__btn' href='#'>YES</a>
    <a class='flap flap__btn' href='#'>NO</a>
    <div class='flap outer flap--right'></div>
  </div>
</div>
<a class='replay' href='#' id='js-replay'>Replay</a>


<script type="text/javascript">
	(function() {
  // Variables
  var panel = document.getElementById("js-panel");
  var btns = document.querySelectorAll(".flap__btn");
  var btnReplay = document.getElementById("js-replay");

  // On load, init panel
  var init = function() {
    panel.classList.add("is--open");

    // If btns are clicked, hide panel
    // Show replay button    
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function() {
        hidePanel();
      });
    }

    function hidePanel() {
      panel.classList.remove("is--open");
      btnReplay.classList.add("is--active");
    }

    // When replay button is clicked,
    // reset the stage.
    btnReplay.addEventListener("click", function() {
      resetStage();
    });
  }

  // Hide the button and re-call init
  function resetStage() {
    btnReplay.classList.remove("is--active");
    init();
  }

  // On load, call init function
  window.onload = function() {
    init();
  }
})();
</script>
	</body>
</html>
